<template>
	<div class="">
		<!-- <div>
			<div class="clear_float jiben1">
				<div>
					<span class="fa fa-bookmark-o"></span>
					<span>名称</span><span>海口镇</span>
				</div>
				<div>
					<span class="fa fa-bookmark-o"></span>
					<span>人口(个)</span><span>10000</span>
				</div>
			</div>
			<div class="clear_float jiben1">
				<div>
					<span class="fa fa-bookmark-o"></span>
					<span>地质灾害点</span><span>3</span>
				</div>
				<div>
					<span class="fa fa-bookmark-o"></span>
					<span>水库(个)</span><span>2</span>
				</div>
			</div>
			<div class="clear_float jiben1">
				<div>
					<span class="fa fa-bookmark-o"></span>
					<span>避灾场所</span><span>海口镇</span>
				</div>
				<div>
					<span class="fa fa-bookmark-o"></span>
					<span>物资仓库(个)</span><span>10000</span>
				</div>
			</div>
		</div> -->
		<div>
			<div class="jiben_xuan clear_float">
				<!-- <div>未来1小时预报</div>
				<div>未来3小时预报</div>
				<div>未来6小时预报</div> -->
				<div :class="active_nice==item?'active_nice':''"  @click="pushBar(item)" v-for="(item , index) of cdddx" :key="index">{{item}}</div>
			</div>
			<!-- todo -->
		<!-- 	<div class="jiben_cons" v-show="jiben_img" v-show='isFalse'>
				{{message}}
			</div> -->
			<div class="jiben_cons"  v-show='isFalse'>
				{{message}}
			</div>
			<div :style="{'height':'300px','padding-left':'5px'}" class="jiben_img" >
				<!-- //七天预报 -->
				<div v-show="jiben_img7" class=" sevenArr">
					<div v-for="(item,index) of sevenArr" :key="index">{{item}}</div>
				</div>
				<div v-show="jiben_img7" class=" sevenArrWW">
					<div v-for="(item,index) of ww1Des" :key="index">
						<img  :src="item" alt="">
					</div>
				</div>
				<div id="jiben_img" v-show="jiben_img7">
					{{height}}
				</div>
				<div v-show="jiben_img7" class=" sevenArrWW">
					<div v-for="(item,index) of ww2Des" :key="index">
						<img  :src="item" alt="">
					</div>
				</div>
				<!-- 乡镇图片 -->
				<!-- <img v-show='isFalse' @click="modaltorShow" :src="jibenImg" alt="" v-show="jiben_img"> -->
				<!-- 24小时预报 -->
				<div v-show="jiben_img24" class="box242424">
					<div v-show="jiben_img24" class=" sevenArr24">
						<div v-for="(item,index) of sevenArr24" :key="index">{{item}}</div>
					</div>
					<div v-show="jiben_img24" class=" sevenArrWW24">
						<div v-for="(item,index) of ww1Des24" :key="index">
							<img :src="item" alt="">
						</div>
					</div>
					<div id="jiben_img24" v-show="jiben_img24">
						{{height}}
					</div>
					<div v-show="jiben_img24" class=" sevenArr24">
						<div v-for="(item,index) of sevenArr24time" :key="index">{{item}}</div>
					</div>
				</div>

			</div>
		</div>
		<vue-modaltor
			:visible="open"
			@hide="open = false"
			:default-width="'65%'"
			:bg-overlay = "'rgba(0,0,0,0.3)'"
			:bg-panel = "'#fff'"
			:animation-panel="'modal-slide-top'">
			<img style="width:100%;height:auto" :src="jibenImg" alt="" >
		</vue-modaltor>

	</div>
</template>

<script>
import Vue from 'vue'
import topTitle from './top';
import echarts from 'echarts';
import VueModalTor from 'vue-modaltor';
Vue.use(VueModalTor);
export default {
    props:["msg","img"],
	components: {
        topTitle,
    },
	data() {
		return {
			open:false,
			t:null,
			isFalse:false,//暂时修改
			// 24
			jiben_img24:true,
			jiben_img7:false,
			sevenArr24:[],
			sevenArr24time:[],
			ww1Des24:[],
			//
			ww1Des:[],
			ww2Des:[],
			sevenArr:[],
			jiben_img:false,
			message:"",
			messageAll:"",
			height:"100px",
			active_nice:"24小时预报",
			cdddx:["24小时预报","七天预报","短时预报","短期预报"],
			title:{
				name: "基本信息",
				time: "",
			},
			jibenImg:"../../../static/images/jiben/x001.jpg",
			jibenImgArr:{
                "北岸村":"../../../static/images/jiben/001.jpg","城北村":"../../../static/images/jiben/002.jpg","陈山村":"../../../static/images/jiben/003.jpg",
                "东门社区":"../../../static/images/jiben/004.jpg","二村村":"../../../static/images/jiben/005.jpg","高湾社区":"../../../static/images/jiben/006.jpg",
                "鹤东村":"../../../static/images/jiben/007.jpg","花园降社区":"../../../static/images/jiben/008.jpg",
                "黄降村":"../../../static/images/jiben/009.jpg","金田村":"../../../static/images/jiben/010.jpg",
                "鸣山社区":"../../../static/images/jiben/011.jpg","平演村":"../../../static/images/jiben/012.jpg","清溪门社区":"../../../static/images/jiben/013.jpg",
                "仁塘湾村":"../../../static/images/jiben/014.jpg","石臼村":"../../../static/images/jiben/015.jpg","塔下社区":"../../../static/images/jiben/016.jpg",
                "坦下村":"../../../static/images/jiben/017.jpg","问鹤社区":"../../../static/images/jiben/018.jpg","新建岭社区":"../../../static/images/jiben/019.jpg",
                "西门社区":"../../../static/images/jiben/020.jpg","一村村":"../../../static/images/jiben/021.jpg","月里湾社区":"../../../static/images/jiben/022.jpg",
                "圩仁村":"../../../static/images/jiben/023.jpg","青田":"../../../static/images/jiben/X001.jpg",
            },
		}
	},
	methods:{
		hideModal() {
			this.open = false
		},
		modaltorShow(){
			this.open = true;
		},
		getHeight(){
			this.height=390-$(".indexComTop")[0].clientHeight-$(".jiben_xuan")[0].clientHeight-$(".jiben_cons")[0].clientHeight+"px";
			// ////console.log($(".qop")[0].clientHeight)
			// ////console.log($(".jiben_xuan")[0].clientHeight)
			// ////console.log($(".jiben_cons")[0].clientHeight)
		},
		compare2(property){
			return function(a,b){
				var value1 = a[property];
				var value2 = b[property];
				return value1 - value2;
			}
		},
		compare(x,y){
			return x-y;
		},
		get24Day(){
			var ww1Des=[];
			var ww2Des=[];
			var url2="http://10.135.30.116:8080/ZJDataCenter/api/StationForecast/get24HourForecastByStaIdAndEles?"
					+"userid=wlzx&pwd=123&productcategory=st24hourstationforecast&staId=58657"
					+"&elements=pr01,t,rh,ww1,windd,winds&dataformat=json"
				this.$ajax({method: 'get',	url:url2}).then((res)=>{
					////console.log(res);
					var _data=res.data.DS;
					_data=_data.sort(this.compare2('hours'));
					var time=res.data.time;
					time=parseInt(time.slice(8,10));
					for(var i=0;i<_data.length;i++){
						var hour=parseInt(_data[i].hours)
						// 计算时间
						_data[i].hours=hour+time>24?hour+time-24:hour+time;
						// 图片地址
						var p;
						for(p in this.imgobjs){
							if(parseInt(_data[i].ww1)==p){
								_data[i].ww2=this.imgobjs[p];
							}
						}
						// 天气情况
						for(p in this.desObj){
							if(parseInt(_data[i].ww1)==p){
								_data[i].ww3=this.desObj[p];
							}
						}
					}
					////console.log(_data)
					this.frecast24=_data;
					var xdata=[];
					var ydata=[];
					this.sevenArr24=[];
					this.ww1Des24=[];
					this.sevenArr24time=[];
					for(var k=0;k<_data.length;k++){
						xdata.push(_data[k].hours);
						ydata.push(_data[k].t)
						this.sevenArr24.push(_data[k].hours+"时");
						this.sevenArr24time.push(_data[k].ww3);
						this.ww1Des24.push(_data[k].ww2);
					};
					////console.log(xdata,ydata)
					var maxY=parseInt(Math.max.apply(null, ydata))+5 ;
					var minY=parseInt(Math.min.apply(null, ydata))-1;
					// const ec = echarts as any;
					this.charts = echarts.init(document.getElementById("jiben_img24"));
					this.charts.setOption({
						color:"#00aaff",
						grid: {
							show: false,
							left: '-3px',
							right: 0,
							bottom: '0%',
							top:'10%',
							containLabel: true
						},
						toolbox: {
							show : true,
							feature : {
								mark : {show:false},
								dataView : {show: false, readOnly: false},
								magicType : {show: false, type: ['line', 'bar']},
								restore : {show: false},
								saveAsImage : {show: false}
							}
						},
						xAxis : [
							{
								type : 'category',
								splitLine:{show: false},
								splitArea : {show : false},
								boundaryGap: true,
								data : xdata,
								axisLine: {show:false},
								axisTick:{show:false},
								axisLabel: {show:false}
							}
						],
						yAxis : [
							{
								type : 'value',
								splitLine:{show: false},
								splitArea : {show : false},
								axisTick:{show:false},
								min:minY,
								max:maxY,
								axisLine:{show:false},
								axisLabel : {show:false},
								}
							],
					series: {
						type: 'line',
						data: ydata,
						smooth: true,
						label: {
							normal: {
								show: true,
								position: 'top'
							}
									},
						areaStyle: {
							normal: {
									color: 'rgba(255, 255, 255,0.2)'
							}
						},
					}
					});
				})
				.catch(function(err){
					////console.log(err)
				})
		},
		getSevenDay(){
			var ww1Des=[];
			var ww2Des=[];
			var url2="http://10.135.30.116:8080/ZJDataCenter/api/StationForecast/get7DaysForecastByStaIdAndEles?"
				+"userid=wlzx&pwd=123&productcategory=ocfstationforecast&staId=58657&elements=ww12,winds,windd,cloud,t,tmax12,tmin12,rh"
				+"&dataformat=json";
				this.$ajax({method: 'get',	url:url2}).then((res)=>{
					////console.log(res);
					////console.log(res);
					var data=res.data;
					////console.log(data);
					var _data=data.DS.slice(1,15);
					var timeArr=[];
					var _dataP=[];
					// 日期
					for(var i=0;i<7;i++){
						var times=this.getThisTime2();
						times=this.getTimeCShow(times,1440*i);
						times=parseFloat(times.slice(4,6))+"/"+parseFloat(times.slice(6,8));
						timeArr.push(times);
					}
					////console.log(timeArr);
					// 整合7天数组
					var pI=0;
					for(var i=0;i<_data.length;i++){
					if(i%2 != 0){
						_dataP[pI]={};
						_dataP[pI].ww1=_data[i-1].ww12;
						_dataP[pI].ww2=_data[i].ww12;

						_dataP[pI].temp=[_data[i-1].tmin12,_data[i-1].tmax12,_data[i].tmin12,_data[i].tmax12];
						_dataP[pI].temp.sort(this.compare);

						_dataP[pI].winds1=_data[i-1].winds;
						_dataP[pI].winds2=_data[i].winds;
						_dataP[pI].windd1=_data[i-1].windd;
						_dataP[pI].windd2=_data[i].windd;
						pI++;
					}
					}
						// 转化数字为描述
						var temps1=[];
						var temps2=[];
						var xtime=[];
					for(var i=0;i<_dataP.length;i++){
						// 时间
						_dataP[i].time=timeArr[i];
						// 最高最低温
						_dataP[i].maxt=_dataP[i].temp[0]
						_dataP[i].mint=_dataP[i].temp[3]
						// 风向
						for(var u=0;u<this.windS.length;u++){
							if(_dataP[i].winds1<this.windS[u][0]){
							_dataP[i].winds1=this.windS[u][1];
							break;
							}
						};
						for(var u=0;u<this.windS.length;u++){
							if(_dataP[i].winds2<this.windS[u][0]){
							_dataP[i].winds2=this.windS[u][1];
							break;
							};
						}
						// 风速
						for(var u=0;u<this.windD.length;u++){
							if(_dataP[i].windd1<this.windD[u][0]){
							_dataP[i].windd1=this.windD[u][1];
							break;
							}
						}
						for(var u=0;u<this.windD.length;u++){
							if(_dataP[i].windd2<this.windD[u][0]){
							_dataP[i].windd2=this.windD[u][1];
							break;
							};
						};
						// 天气图片
						var p;
						for(p in this.imgobjs){
							if(parseInt(_dataP[i].ww1)==p){
								_dataP[i].ww1Img=this.imgobjs[p];
							}
						}
						for(p in this.imgobjs2){
							if(parseInt(_dataP[i].ww2)==p){
							_dataP[i].ww2Img=this.imgobjs2[p];
							}
						}
						// 天气情况
						for(p in this.desObj){
							if(parseInt(_dataP[i].ww1)==p){
								_dataP[i].ww1Des=this.desObj[p];
							}
							if(parseInt(_dataP[i].ww2)==p){
								_dataP[i].ww2Des=this.desObj[p];
							}
						}
						ww1Des.push( _dataP[i].ww1Img);
						ww2Des.push( _dataP[i].ww2Img);
						if(_dataP[i].temp[0]<-100){
							_dataP[i].temp[0]=""
						}
						if(_dataP[i].temp[3]<-100){
							_dataP[i].temp[3]=""
						}
						temps1.push( _dataP[i].temp[0]);
						temps2.push( _dataP[i].temp[3]);
						xtime.push( _dataP[i].time);
					}
					////console.log(_dataP)
					this._dataP=_dataP;

					this.echart7(temps1,temps2,xtime);
					this.sevenArr=xtime;
					this.ww1Des=ww1Des;
					this.ww2Des=ww2Des;
				})
				.catch(function(err){
					////console.log(err)
				})
		},
		getTimeCShow(str,idx){
			var pattern = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/;
			var formatedDate = str.replace(pattern, '$1/$2/$3 $4:$5:$6');
			var timeC=new Date(formatedDate);
			return this.getSexTimeShow(timeC,idx);
		},
		getSexTimeShow(timeC,aa){
			var date1 = timeC,
			time1=date1.getFullYear()+"-"+(date1.getMonth()+1)+"-"+date1.getDate();//time1表示当前时间
			var date2 = new Date(date1);
			date2.setMinutes(date1.getMinutes()+aa);
			var Min=date2.getMinutes()>9?date2.getMinutes():"0"+(date2.getMinutes());
			var Hour=date2.getHours()>9?date2.getHours():"0"+(date2.getHours());
			var Mounth=date2.getMonth()+1>9?date2.getMonth()+1:"0"+(date2.getMonth()+1);
			var Day=date2.getDate()>9?date2.getDate():"0"+(date2.getDate());
			var time2 = ""+date2.getFullYear()+Mounth+Day+Hour+Min+"00";
		return time2;
		},
		getThisTimeaaa(){
			var date = new Date();
			var Day = date.getDate()>9?date.getDate():"0"+date.getDate();
			var Year = date.getFullYear();
			var Mounth = date.getMonth()>=9?date.getMonth()+1:"0"+(date.getMonth()+1);
			var hour=date.getHours()>9?date.getHours():"0"+date.getHours();
			var min=date.getMinutes()>9?date.getMinutes():"0"+date.getMinutes();
			var end=Year+"/"+Mounth+"/"+Day+" "+hour+":"+min+"00";
			return end;
		},
		getThisTime(){
			var time=this.getThisTimeaaa();
			time=time.slice(0,4)+time.slice(5,7)+time.slice(8,10)+time.slice(11,13)+"0000";
			time=this.getTimeCShow(time,-60)
			return time;
		},
		getThisTime2(){
			var time=this.getThisTimeaaa();
			time=time.slice(0,4)+time.slice(5,7)+time.slice(8,10)+time.slice(11,13)+"0000";
			return time;
		},
		echart7(data1,data2,time){
			////console.log(data1,data2,time)
			var maxY=parseInt(Math.max.apply(null, data2))+5 ;
			var minY=parseInt(Math.min.apply(null, data1))-4;
			////console.log(minY,maxY)
			// const container = document.getElementById('jiben_img');
			this.charts = echarts.init(document.getElementById("jiben_img"));
			this.charts.setOption({
				color:"#00aaff",
				grid: {
					show: false,
					left: '-3px',
					right: 0,
					bottom: '0%',
					top:'20%',
					containLabel: true
				},
				toolbox: {
					show : true,
					feature : {
						mark : {show:false},
						dataView : {show: false, readOnly: false},
						magicType : {show: false, type: ['line', 'bar']},
						restore : {show: false},
						saveAsImage : {show: false}
					}
				},
				xAxis : [
					{
						type : 'category',
						splitLine:{show: false},
						splitArea : {show : false},
						boundaryGap: true,
						data : time,
						axisLine: {show:false},
						axisTick:{show:false},
						axisLabel: {show:false}
					}
				],
				yAxis : [
					{
						type : 'value',
						splitLine:{show: false},
						splitArea : {show : false},
						axisTick:{show:false},
						min:minY,
						max:maxY,
						axisLine:{show:false},
						axisLabel : {show:false},
						}
					],
				series:  [
						{
						type:'line',
						data:data2,
						smooth: true,
						label: {
							normal: {
									show: true,
									color:"#ffbf01",
									position: 'top'
							}
						},
						lineStyle:{color:'#ffbf01'}
					},
					{
						type:'line',
						data:data1,
						smooth: true,
						label: {
							normal: {
									show: true,
									position: 'bottom'
							}
						},
						lineStyle:{color:'#00aaff'},
					}
				]
			});
		},
		pushBar(str,aaa){

			if(str){
				this.active_nice=str;
			}else{
				for(var i=0;i<this.cdddx.length;i++){
					if(this.cdddx[i]==this.active_nice){
						if(i==this.cdddx.length-1){
							this.active_nice=this.cdddx[0];
						}else{
							this.active_nice=this.cdddx[i+1];
						}
						break;
					}
				}
			};
			this.jiben_img=false;
			this.jiben_img7=false;
			this.jiben_img24=false;
			if(this.active_nice=="短时预报"){
				this.jiben_img=true;
				this.message=this.messageAll.dsyb;
			}else if(this.active_nice=="短期预报"){
				this.jiben_img=true;
				this.message=this.messageAll.dqyb;
			}else if(this.active_nice=="七天预报"){
				this.jiben_img7=true;
				////console.log("sqsqsqsq")
				this.getSevenDay();
			}else if(this.active_nice=="24小时预报"){
				this.jiben_img24=true;
				this.get24Day();
			}
			// setTimeout(()=>{
				this.getHeight();
			// },1000);
			clearInterval(this.t);
			this.t=setInterval(()=>{
				// //console.log(22222)
				this.pushBar();

			},30000)
		},
		lunbo(){
			this.t=setInterval(()=>{
				// //console.log(11111)
				this.pushBar();
			},30000)
		},
		getImg(){
			var i;
			////console.log(this.img);
			for(var i in this.jibenImgArr){
				if(this.img==i.slice(0,2)){
					this.jibenImg=this.jibenImgArr[i];
				}
			}
			////console.log(this.jibenImg);
		},
		refreshAll(){
			////console.log(this.jibenImg);
			this.getImg();
		},
		imgObj(){
			this.desObj={
					0:"晴",1:"晴",2:"少云",3:"多云", 4:"阴天",5:"小雨",6:"中雨",7:"大雨",8:"暴雨",9:"大暴雨",10:"特大暴雨",11:"雷阵雨",
					12:"浮尘",13:"扬沙",14:"小雪",15:"小雪",16:"中雪",17:"大雪",18:"暴雪",19:"冻雨",20:"沙尘暴",21:"雷阵雨伴有冰雹",
					22:"强沙尘暴",23:"雾",24:"阵雪",25:"阵雨",26:"小雨到中雨",27:"中雨到大雨",28:"大雨到暴雨",29:"暴雨到大暴雨",
					30:"大暴雨到特大暴雨",31:"小雪到中雪",32:"中雪到大雪",33:"大雪到暴雪",53:"霾","-999":"-"
			};
			this.windD=[  //风向
				[11.25,"北风"],[33.75,"东北偏北风"],[56.25,"东北风"],[78.75,"东北偏东风"],[101.25,"东风"],[123.75,"东南偏东风"],[146.25,"东南风"],[168.75,"东南偏南风"],
				[191.25,"南风"],
				[213.75,"西南偏南风"],[236.25,"西南风"],[258.75,"西南偏西风"],[281.25,"西北偏西风"],[326.25,"西北风"],[348.75,"西北偏北风"],[1000,"西北偏北风"],
			];
			this.windS=[ //风速
					[0.2,"0级"],[1.5,"1级"],[3.3,"2级"],[5.4,"3级"],[7.9,"4级"],[10.7,"5级"],[13.8,"6级"],[17.1,"7级"],
					[20.7,"8级"],[24.4,"9级"],[28.4,"10级"],[32.6,"11级"],[36.9,"12级"],[41.4,"13级"],[46.1,"14级"],[50.9,"15级"],
					[56.0,"16级"],[61.2,"17级"],
				];
			this.imgobjs={0:"../../../static/images/rain1/icon_1.png",
						1:"../../../static/images/rain1/icon_1.png",
						2:"../../../static/images/rain1/icon_3.png",
						3:"../../../static/images/rain1/icon_3.png",
						4:"../../../static/images/rain1/icon_4.png",
						5:"../../../static/images/rain1/icon_5.png",
						6:"../../../static/images/rain1/icon_6.png",
						7:"../../../static/images/rain1/icon_7.png",
						8:"../../../static/images/rain1/icon_8.png",
						9:"../../../static/images/rain1/icon_9.png",
						10:"../../../static/images/rain1/icon_10.png",
						11:"../../../static/images/rain1/icon_11.png",
						12:"../../../static/images/rain1/icon_12.png",
						13:"../../../static/images/rain1/icon_13.png",
						14:"../../../static/images/rain1/icon_14.png",
						15:"../../../static/images/rain1/icon_15.png",
						16:"../../../static/images/rain1/icon_16.png",
						17:"../../../static/images/rain1/icon_17.png",
						18:"../../../static/images/rain1/icon_18.png",
						19:"../../../static/images/rain1/icon_19.png",
						20:"../../../static/images/rain1/icon_20.png",
						21:"../../../static/images/rain1/icon_21.png",
						22:"../../../static/images/rain1/icon_22.png",
						23:"../../../static/images/rain1/icon_23.png",
						24:"../../../static/images/rain1/icon_24.png",
						25:"../../../static/images/rain1/icon_25.png",
						26:"../../../static/images/rain1/icon_26.png",
						27:"../../../static/images/rain1/icon_27.png",
						28:"../../../static/images/rain1/icon_28.png",
						29:"../../../static/images/rain1/icon_29.png",
						30:"../../../static/images/rain1/icon_30.png",
						31:"../../../static/images/rain1/icon_31.png",
						32:"../../../static/images/rain1/icon_32.png",
						33:"../../../static/images/rain1/icon_33.png",
						53:"../../../static/images/rain1/icon_53.png"
						};
			this.imgobjs2={0:"../../../static/images/rain1/icon_1s.png",
						1:"../../../static/images/rain1/icon_1s.png",
						2:"../../../static/images/rain1/icon_3s.png",
						3:"../../../static/images/rain1/icon_3s.png",
						4:"../../../static/images/rain1/icon_4.png",
						5:"../../../static/images/rain1/icon_5.png",
						6:"../../../static/images/rain1/icon_6.png",
						7:"../../../static/images/rain1/icon_7.png",
						8:"../../../static/images/rain1/icon_8.png",
						9:"../../../static/images/rain1/icon_9.png",
						10:"../../../static/images/rain1/icon_10.png",
						11:"../../../static/images/rain1/icon_11.png",
						12:"../../../static/images/rain1/icon_12.png",
						13:"../../../static/images/rain1/icon_13.png",
						14:"../../../static/images/rain1/icon_14.png",
						15:"../../../static/images/rain1/icon_15.png",
						16:"../../../static/images/rain1/icon_16.png",
						17:"../../../static/images/rain1/icon_17.png",
						18:"../../../static/images/rain1/icon_18.png",
						19:"../../../static/images/rain1/icon_19.png",
						20:"../../../static/images/rain1/icon_20.png",
						21:"../../../static/images/rain1/icon_21.png",
						22:"../../../static/images/rain1/icon_22.png",
						23:"../../../static/images/rain1/icon_23.png",
						24:"../../../static/images/rain1/icon_24s.png",
						25:"../../../static/images/rain1/icon_25s.png",
						26:"../../../static/images/rain1/icon_26.png",
						27:"../../../static/images/rain1/icon_27.png",
						28:"../../../static/images/rain1/icon_28.png",
						29:"../../../static/images/rain1/icon_29.png",
						30:"../../../static/images/rain1/icon_30.png",
						31:"../../../static/images/rain1/icon_31.png",
						32:"../../../static/images/rain1/icon_32.png",
						33:"../../../static/images/rain1/icon_33.png",
						53:"../../../static/images/rain1/icon_53.png"
						};
	  }

    },
	mounted(){
		this.imgObj();
		this.getHeight();
		this.get24Day()
		this.lunbo();
		// //console.log(this.img);
		this.$ajax({method: 'get',	url:"http://172.21.129.156:8081/web/ftp/Forecast"}).then((res)=>{
			////console.log(res);
			////console.log(res);
			this.messageAll=res.data.DS;
			this.message=this.messageAll.dsyb;
			setTimeout(()=>{
				this.getHeight();
			},100);
		})
		.catch(function(err){
			////console.log(err)
		})

		this.getImg();
		this.$emit('refreshTop',this.title)
	}
}
</script>

<style lang="less">
	.modal-vue--content-panel{
		text-align: center;
	}
	.modal-vue--content{
		padding: 0;
	}
	#jiben_img{
		width: 95%;
		height: 40%;
	}
	#jiben_img24{
		width: 1440px;
		height: 40%;
	}
	.jiben_cons{
		padding: 14px 10px;;
		font-size: 12px;
	}
	.box242424{
		width: 100%;
		height: 100%;
		overflow-x: auto;
		.sevenArr24{
			width: 1440px;
			display: flex;
			justify-content: space-around;
			padding-right: 10px;
			height: 10%;
			line-height: 200%;
			&>div{
				width: 60px;
				text-align: center;
			}
		}
		.sevenArrWW24{
			width: 1440px;
			display: flex;
			justify-content: space-around;
			padding-right: 10px;
			height: 25%;
			text-align: center;
			&>div{
				display: flex;
				align-items: center;
				width: 60px;
				text-align: center;
				justify-content: center;
			}
			img{
				height: auto !important;
				vertical-align: middle;
				width: 80% !important;
			}
		}
	}

	.sevenArr{
		display: flex;
		justify-content: space-around;
		padding-right: 10px;
		height: 10%;
		line-height: 200%;
	}
	.sevenArrWW{
		display: flex;
		justify-content: space-around;
		padding-left: 10px;
		height: 25%;
		&>div{
			display: flex;
			align-items: center;
		}
		img{
			height: auto !important;
			vertical-align: middle;
			width: 63% !important;
		}
	}
	.jiben_xuan{
		&>div{
			float: left;
			width: 24%;
			padding: 8px 8px;
			text-align: center;
			cursor: pointer;
		}
		.active_nice{
			color: #64D0E6;
			border-bottom: 3px solid #64D0E6;
		}
	}
	.jiben_img{
		text-align: center;
		img{
			width: 95%;
			height: 95%;
			cursor: zoom-in;
		}
	}
	.jiben1{
		&>div{
			float: left;
			font-size: 12px;
			width: 50%;
			padding: 3px 8px 0px;
			background: rgba(0, 0, 0,0.2);
			margin-top: 1px;
			&>span:nth-child(1){
				width: 12px;
				display: inline-block;
				color: #fff;
			}
			&>span:nth-child(2){
				display: inline-block;
				width: 78px;
				color: #65B47B;
			}
			&>span:nth-child(3){
				width: 40px;
				display: inline-block;
				color: #CCCB0E;
			}
		}
	}
</style>
